/* 材质 */
@utility bg-material-ultrathin {
  @apply bg-material-ultrathin-light;
}
@utility bg-material-thin {
  @apply bg-material-thin-light;
}
@utility bg-material-thick {
  @apply bg-material-thick-light;
}
@utility bg-material {
  @apply bg-material-light;
}
@utility bg-material-chrome {
  @apply bg-material-chrome-light;
}

/* 材质浅色 */
@utility bg-material-ultrathin-light {
  background: linear-gradient(0deg, #0d0d0d, #0d0d0d), rgba(191, 191, 191, 0.44);
  background-blend-mode: color-dodge, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-thin-light {
  background: linear-gradient(0deg, #333333, #333333), rgba(166, 166, 166, 0.7);
  background-blend-mode: color-dodge, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-thick-light {
  background: linear-gradient(0deg, #5c5c5c, #5c5c5c), rgba(153, 153, 153, 0.97);
  background-blend-mode: color-dodge, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-light {
  background: linear-gradient(0deg, #383838, #383838), rgba(179, 179, 179, 0.82);
  background-blend-mode: color-dodge, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-chrome-light {
  background: rgba(255, 255, 255, 0.75);
  background-blend-mode: hard-light;
  backdrop-filter: blur(25px);
}

/* 材质深色 */
@utility bg-material-ultrathin-dark {
  background: linear-gradient(0deg, #9c9c9c, #9c9c9c), rgba(37, 37, 37, 0.55);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-thin-dark {
  background: linear-gradient(0deg, #9c9c9c, #9c9c9c), rgba(37, 37, 37, 0.7);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-dark {
  background: linear-gradient(0deg, #8c8c8c, #8c8c8c), rgba(37, 37, 37, 0.82);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-thick-dark {
  background: linear-gradient(0deg, #7c7c7c, #7c7c7c), rgba(37, 37, 37, 0.9);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-chrome-dark {
  background: linear-gradient(0deg, #7c7c7c, #7c7c7c), rgba(28, 28, 28, 0.9);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}

@utility bg-material-ultrathin-dark-elevated {
  background: linear-gradient(0deg, #9c9c9c, #9c9c9c), rgba(37, 37, 37, 0.55);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-thin-dark-elevated {
  background: linear-gradient(0deg, #9c9c9c, #9c9c9c), rgba(37, 37, 37, 0.7);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-dark-elevated {
  background: linear-gradient(0deg, #8c8c8c, #8c8c8c), rgba(37, 37, 37, 0.82);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-thick-dark-elevated {
  background: linear-gradient(0deg, #7c7c7c, #7c7c7c), rgba(37, 37, 37, 0.9);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
@utility bg-material-chrome-dark-elevated {
  background: linear-gradient(0deg, #7c7c7c, #7c7c7c), rgba(28, 28, 28, 0.9);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(25px);
}
